<template>
    <view class="mine-view">
        <view class="new-list" v-for="(i, index) in 5" :key="index">
            <view class="new-view">
                <image src="/static/pc/unread-icon.png" class="new-state-icon"></image>
                <view class="item-top">系统通知</view>
                <view class="item-middle">欢迎您注册云诺端，诺众天下，丰裕万家！</view>
                <view class="item-bottom">2024年12月16日 14:00</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {

    data() {
        return {

        };
    },
    methods: {}
}
</script>

<style scoped lang="scss">
.mine-view {
    width: 100%;
    background: white;
    padding: 55px 40px 36px 40px;
    min-height: 610px;

    .new-view {
        height: 120px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #E8DED6;
        backdrop-filter: blur(4px);
        padding: 12px 16px;
        font-family: PingFangSC, PingFang SC;
        text-align: left;
        font-style: normal;
        position: relative;

        .item-top {
            font-weight: 600;
            font-size: 16px;
            color: #2C1101;
            line-height: 28px;
        }

        .item-middle {
            font-size: 14px;
            color: #B8ACA3;
            line-height: 28px;
        }

        .item-bottom {
            margin-top: 20px;
            font-size: 14px;
            color: #B8ACA3;
            line-height: 20px;
        }

        .new-state-icon {
            width: 41px;
            height: 21px;
            position: absolute;
            right: 18px;
            top: 0;
        }
    }

    .new-list+.new-list {
        margin-top: 20px;
    }
}
</style>